<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播支持左右，上下，渐隐渐闲类型</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="pb-carouselWarp demo1">
			<ul class="pb-carousel">
				<li class="pb-this"><img src="img/1.jpg" alt="" /></li>
				<li><img src="img/2.jpg" alt=""/></li>
				<li><img src="img/3.jpg" alt=""/></li>
				<li><img src="img/4.jpg" alt=""/></li>
				<li><img src="img/5.jpg" alt=""/></li>
			</ul>
			<ul class="pb-carousel-ind">
				<li class="pb-this"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<button class="pb-arrow pb-arrow-prev"></button>
			<button class="pb-arrow pb-arrow-next" id="aa"></button>
		</div>
		
		
		<div class="pb-carouselWarp demo2">
			<ul class="pb-carousel">
				<li class="pb-this"><img src="img/5.jpg" alt="" /></li>
				<li><img src="img/5.jpg" alt=""/></li>
				<li><img src="img/3.jpg" alt=""/></li>
				<li><img src="img/2.jpg" alt=""/></li>
				<li><img src="img/1.jpg" alt=""/></li>
			</ul>
			<ul class="pb-carousel-ind">
				<li class="pb-this"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<button class="pb-arrow pb-arrow-prev"></button>
			<button class="pb-arrow pb-arrow-next" id="aa"></button>
		</div>
		
	</body>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/carousel.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		carousel(
			$('.demo1'),	//必选， 要轮播模块(id/class/tagname均可)，必须为jQuery元素
			{
				type: 'leftright',	//可选，默认左右(leftright) - 'leftright' / 'updown' / 'fade' (左右/上下/渐隐渐现)
				arrowtype: 'move',	//可选，默认一直显示 - 'move' / 'none'	(鼠标移上显示 / 不显示 )
				autoplay: true,	//可选，默认true - true / false (开启轮播/关闭轮播)
				time:3000	//可选，默认3000
			}
		);
		
		carousel(
			$('.demo2'),	//必选， 要轮播模块(id/class/tagname均可)，必须为jQuery元素
			{
				type: 'fade',	//可选，默认左右(leftright) - 'leftright' / 'updown' / 'fade' (左右/上下/渐隐渐现)
				arrowtype: 'move',	//可选，默认一直显示 - 'move' / 'none'	(鼠标移上显示 / 不显示 )
				autoplay: true,	//可选，默认true - true / false (开启轮播/关闭轮播)
				time:4000	//可选，默认3000
			}
		);
	</script>
</html>
